@import "@/styles/mixin.scss";

.upload-container {
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 57rpx;
  background: $bg-color-form;

  .title-block {
    @include flex;
    align-items: flex-end;
    padding: 33rpx 0 22rpx 40rpx;

    .tip {
      font-size: 24rpx;
    }
  }

  .ipt-description-block {
    .textarea-description {
      position: relative;
      width: 100%;
      min-height: 280rpx;
      padding: 20rpx 40rpx 35rpx;
      padding-right: 35rpx;
      background: #fff;

      .textarea {
          width: 100%;
        // width: 100%;
        height: 230rpx;
      }

      .counter-block {
        position: absolute;
        bottom: 3rpx;
        right: 35rpx;
        @include flex-c;
        @include sc(28rpx, #8999b1);
      }
    }
  }

  .upload-photo {
    .photo-block {
      @include flex;
      padding: 35rpx 15rpx 0;
      background: #fff;

      .photo-item {
        position: relative;
        width: 25%;

        .photo {
          @include wh(130rpx, 130rpx);
          margin: 0 auto 35rpx;
        }
        .delete-btn{
            @include flex-c;
            position: absolute;
            top: 0;
            right: 27rpx;
            @include wh(30rpx,30rpx);
            background: #000;
            img{
                @include wh(20rpx,20rpx);
            }
        }
      }

      .add-btn {
        width: 25%;

        .add-inner {
          position: relative;
          @include wh(130rpx, 130rpx);
          margin: 0 auto 35rpx;
          background: #eef3f8;
          border: 1rpx solid #55B768;

          img {
            @include center-t;
            @include wh(60rpx, 55rpx);
          }
        }
      }
    }
  }

  .confirm-btn {
    @include active-btn(540rpx, 80rpx);
    margin-top: 54rpx;
  }
}
